<template lang="pug">
    div.mid
        div.logo-image
        input(placeholder='手机号/邮箱/用户名' v-model="Id").Id
        div.input
            input(v-if='isPassword' placeholder='密码' v-model="password" type="text" @keyup="").password
            input(v-else='!isPassword' placeholder='密码' v-model="password" type="password"
            @keyup="inputPassword").password
            span(@click="isPassword=!isPassword").showPassword
        button(@click="loginButton" :class="{loginActive:isChange}").login-button 登录
        div.help
            span.help-left 登录遇到问题
            span.help-right 短信验证登录
        div(v-show="isShowHelpBox").help-box {{helpText}}
        div.register 立即注册
</template>

<script>
	export default {
		name: "mid",
		data() {
			return {
				Id: "",
				password: "",
				isPassword: false,
				helpText: "aaa",
				isShowHelpBox: false,
				isChange: false
			}
		},
		mounted() {
		},
		methods: {
			inputPassword() {
				switch (this.password.length) {
                    case 0:
                    	this.isChange=false;
                    	break;
                    default:
                    	this.isChange=true;
                }

			},
			//获取密码
			loginButton() {
				if (this.Id === '') {
					this.isShowHelpBox = true;
					this.helpText = "请输入账号";
					setTimeout(() => {
						this.isShowHelpBox = false;
					}, 2000)
				} else if (this.password === '') {
					this.isShowHelpBox = true;
					this.helpText = "请输入密码";
					setTimeout(() => {
						this.isShowHelpBox = false;
					}, 2000)
				} else {
					this.$http.get("https://www.easy-mock.com/mock/5b0e9bffed71ea4dc4c171de/vue-baidu-phone/password").then((s) => {
						console.log(s.data.data.password);
						this.verify(s.data.data.password);
					});
				}
			},
			// 比较密码是否正确,如果正确获取token
			verify(password) {
				if (this.password === password) {
					this.$http.get("https://www.easy-mock.com/mock/5b0e9bffed71ea4dc4c171de/vue-baidu-phone/password").then((s) => {
						console.log(s.data.data.token);
						sessionStorage.setItem('token', s.data.data.token);
						window.history.back();
					});
				} else {
					this.isShowHelpBox = true;
					this.helpText = "密码错误请查证";
					setTimeout(() => {
						this.isShowHelpBox = false;
					}, 2000)
				}
			}
		}
	}
</script>

<style scoped lang="stylus">
    .mid
        padding: 0 .4rem;
        margin-top .933333333333333rem
        .logo-image
            display inline-block
            background url("../../assets/img/icons/login/BaiDu.png") no-repeat
            width 3.68rem
            height 1.28rem
            background-size contain
            margin-bottom 0.8rem
        .Id
            border 0.026666666667rem solid #ddd
            font-size: .426666666666667rem;
            outline-style none
            width 8.53333333333rem
            height 1rem
            padding 0 0.2666666667rem
        .input
            display inline-block
            position relative
            input
                border 0.026666666667rem solid #ddd
                font-size: .426666666666667rem;
                outline-style none
                width 7.73333333333rem
                height 1rem
                padding 0 1.06666667rem 0 0.266666667rem
            .showPassword
                background url("../../assets/img/icons/login/showPassword.png") no-repeat
                background-size contain
                height: .506666666666667rem;
                width: .586666666666667rem;
                display inline-block
                position absolute
                right 0.2rem
                top 0
                bottom 0
                margin auto
        .login-button
            color: #90b6ff;
            background: #3c76ff;
            margin: .666666666666667rem 0 .64rem;
            width: 100%;
            line-height: 1.173333333333333rem;
            height: 1.173333333333333rem;
            outline-style none
            font-size: .48rem
            border none
            &:active
                color white
                background-color #3c76ff
        .loginActive
            color white
            background-color #3c76ff
        .help
            color: #999;
            font-size: .373333333333333rem;
            display flex
            justify-content space-between
        .help-box
            display inline-block
            background-color rgba(0, 0, 0, 0.5)
            color white
            font-size 0.4rem
            padding: 0.2rem
        .register
            width: 2.933333333333333rem;
            height: 1.2rem;
            line-height: 1.173333333333333rem;
            font-size: .373333333333333rem;
            color: #367cff;
            border: .013333333333333rem solid #367cff;
            display: inline-block
            position absolute
            bottom 0.8rem
            left: 0
            right 0
            margin auto
</style>
